<template>
  <div class="full-width">
    <div id="header"
      :style="{'background-image': 'url(' + state.detail.coverImg + ')','background-repeat':'no-repeat','background-size':'cover'}"
      class="spy-15 min-width-130">
      <div class="width-130 mx-auto">
        <p class="text-orange text-80">{{state.detail.name}}</p>
        <p class="text-orange text-80">.</p>
        <p class="text-gray text-24">Kupo Technology</p>
      </div>
    </div>
    <div v-html="state.detail.rockTextDesc" class="flex-column sp_m mx-auto width-130 px-16 py-38 bg-gray-light3 rounded-15">
    </div>
    <div class="width-130 height-auto d-flex flex-wrap mx-auto mt-40 mb-10">
      <div class="mx-4 mb-12" v-for="(i, index) in state.detail.details" :key="index">
        <div class="width-28 height-38 item_bg flex_center">
          <el-image class="width-26" :src="i.picture" fit="cover" />
        </div>
        <div class="width-28 height-19 px-5 pt-10 bg-gray-light3">
          <p class="content">{{i.title}}</p>
          <img class="fr cursor-pointer" :src="honorIcon" alt="icon">
        </div>
      </div>
    </div>
    <div class="hoverbtn mx-auto mb-40 width-20 px-11 py-2 border border-color-dark rounded-5 cursor-pointer">
      查看详情 >
    </div>
    <ContactUs/>
    <CommonFooter/>
  </div>
</template>

<script setup>
import CommonFooter from '@/components/CommonFooter.vue'
import ContactUs from '@/components/contactUs.vue'
import { mainContent, list } from '@/static/honor'
import honorIcon from '@/assets/images/honor_icon.jpg'
import { onMounted, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import userStore from '@/store/index'
import urls from '@/api/index'

const state = reactive({
  detail: {}
})
watch(() => userStore.state.lang, () => {
  getDetail()
})
const getDetail = () => {
  userStore.commit('CHANGELOAD', true)
  const params = {
    id: '62d6bf89e1d8375b113f70a8',
    lang: userStore.state.lang
  }
  urls.home.getModuleData(params)
    .then(res => {
      state.detail = res.data
      userStore.commit('CHANGELOAD', false)
    })
    .catch(err => {
      userStore.commit('CHANGELOAD', false)
      ElMessage.error(err.msg)
    })
}
onMounted(() => {
  getDetail()
  const header = document.getElementById('header')
  header.scrollIntoView()
})
</script>

<style lang="scss">
.bg_img {
  background: url("@/assets/images/honor.jpg") no-repeat;
  background-size: cover;
}
.item_bg{
  background: url("@/assets/images/honor_bg.png") no-repeat;
  background-size: cover;
}
.sp_m{
  margin-top: -120px;
  p{
    font-size: 18px
  }
}
.out:hover img{
  transform: scale(1.1);
}
.out img{
  transition: all .5s ease;
  object-fit: cover;
}

.content{
  width:100%;
  height: 40px;
  margin-bottom: 32px;
  font-size: 14px;
  color: #555;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-all;
  line-height: 20px;
}
.vertical-line {
  width: 2px;
  height: 100px;
  background: #ff5a2d;
  position: absolute;
  top: 320px;
  left: 40px;
  z-index: 888;
}
.news-item:hover{
  color: #fff;
  background: #222!important;
  img{
    filter: blur(5px);
  }
  p{
    color: #fff;
  }
}
.hoverbtn:hover{
  background: #333;
  color: #fff;
  border: none;
}
</style>
